<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
  <title>广州道教廟宇數位博物館</title>
  <!-- 引入jquery -->
  <script src="./js/jquery.min.js"></script>
  <!-- 引入axios -->
  <script src="./js/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 引入vue -->
  <script src="./js/vue.min.js"></script>
  <!-- 引入组件库 -->
  <script src="./js/element-ui.js"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=84078df7a895772d1e721c9e2c0c780f"></script>
  <div id="app">
    <!-- 地图 -->
    <div id="main"></div>
    <!-- 头部 -->
    <header>
      <div class="header_title">
        <span>{{curLocation=='guangzhou'?'广州':'香港'}}道教廟宇數位博物館</span>
        <img @click="handleChangeLocation" src="./imgs/switch.png" alt="">
      </div>
    </header>
    <!-- 侧边 -->
    <div class="bg_color"></div>
    <aside>
      <div class="list_wrapper">
        <!-- tabs -->
        <div class="aside_header" v-show="!searchResultFlag && !listInfoClick">
          <p :class="isActive==0?'tabs_active':''" @click="handleSwitchTabs(0)">廟宇<span>（{{total1}}座）</span></p>
          <p :class="isActive==1?'tabs_active':''" @click="handleSwitchTabs(1)">神明<span>（{{total2}}）</span></p>
        </div>
        <!-- 搜索 -->
        <div v-show="searchResultFlag || listInfoClick" style="height:0.2rem"></div>
        <div class="aside_search">
          <el-input v-model="asideSearch" :placeholder="isActive==0?'请输入庙宇名称、碑刻、神明等':'请输入神明关键词'" @keyup.enter.native="handleSearch">
          </el-input>
          <span class="search_btn" @click="handleSearch">搜索</span>
        </div>
        <!-- 列表 -->
        <div class="aside_list">
          <!-- 搜索后返回 -->
          <div v-show="searchResultFlag && !listInfoClick" class="list_back">
            <span style="cursor: pointer;" @click="handleBackList">&lt; 返回</span>
            <p>在DDM1中找到 <span style="font-weight: bold;">{{total}}</span> 個結果</p>
          </div>
          <!-- 搜索跳转 -->
          <!-- <div class="search_redirect" v-show="searchResultFlag && !listInfoClick">
            <span @click="handleGoDDM2">跳轉至DDM2查看更多關於”{{searchResult}}“的線索 >></span>
          </div> -->
          <ul v-show="!listInfoClick">
            <li class="list_info" v-for="(item,index) in isActive==0?asideList1:asideList2" :key="index"
              @click="handleActiveCard(item,index)">
              <div class="info_left">
                <!--  :style="{color:searchResultFlag?'#D4C003':''}" :item.title-->
                <p v-show="isActive==0" class="left_title" :style="{color:searchResultFlag?'#D4C003':''}">
                  {{item.name}}</p>
                <div class="left_address">
                  <p v-show="isActive==0" class="address">
                    <img src="./imgs/position.png" alt="" />
                    現址：<span>{{item.new_addr}}</span>
                    <!--舊址：<span>{{item.old_addr}}</span>-->
                    <!-- <span v-show="isActive==1">共有{{item.img_total}}張圖片</span> -->
                  </p>
                  <!--<p v-show="isActive==0" class="address">-->
                  <!--  現址：<span>{{item.new_addr}}</span>-->
                    <!-- <span v-show="isActive==1">收錄在{{item.temple_total}}個廟宇中</span> -->
                  <!--</p>-->
                </div>
                <!-- 神明 -->
                <div v-show="isActive==1" class="info_shenm">
                  <div class="info_img_scale">
                    <img :src="item.thumb" alt="">
                  </div>
                  <div class="info_desc">
                    <p class="desc_title">{{item.title}}</p>
                    <p class="desc_info">收錄在{{item.temple_total}}個廟宇中</p>
                  </div>
                </div>
              </div>
              <span class="info_right">
                <img class="right_img" src="./imgs/pole.png" />
              </span>
            </li>
          </ul>
          <!-- 详情 -->
          <div class="see_list_info" v-if="listInfoClick">
            <div class="see_info_title">
              <p style="font-weight: bold;font-size: 0.3rem;display: flex;">
                <img src="./imgs/title_pole.png" alt=""> {{templeDetail.name}}
              </p>
              <span @click="handleFrontGrade" style="cursor: pointer;">返回上一级</span>
            </div>
            <div class="see_info_content">
              <p class="see_info_desc">{{isActive==0?templeDetail.new_addr:''}}</p>
              <div class="see_info_bg">
                <img v-if="isActive==0&&templeDetail.image" :src="prefixUrl+templeDetail.image" width="100%" height="100%" alt="">
                <img v-if="isActive==1&&templeDetail.thumb" :src="prefixUrl+templeDetail.thumb" width="100%" height="100%" alt="">
                <div class="info_bg_btn">
                  <p class="bg_btn_title"></p>
                  <!-- <p class="bg_btn_title">{{templeDetail.name}}</p> -->
                  <span @click="handleLookInfo">{{isActive==0?'廟貌 / 神明 / 碑刻':'神像图片'}}</span>
                </div>
              </div>
              <div class="see_info_dataline" v-show="isActive==0">
                <p>庙宇资料</p>
              </div>
              <!-- 资料详细 -->
              <div class="see_dataline_desc" v-show="isActive==0">
                <el-row>
                  <el-col :span="24">
                    <span class="dataline_desc_title">庙宇名称</span>
                    <span class="dataline_desc_word">{{templeDetail.name}}</span>
                  </el-col>
                  <el-col :span="24">
                    <span class="dataline_desc_title">地址</span>
                    <span class="dataline_desc_word long_text">{{templeDetail.new_addr}}</span>
                  </el-col>
                  <el-col :span="24">
                    <span class="dataline_desc_title">現存情況</span>
                    <span class="dataline_desc_word">{{templeDetail.is_exist==1?'存':'不存'}}</span>
                  </el-col>
                  <!--<el-col :span="24">-->
                  <!--  <span class="dataline_desc_title">修建歷史</span>-->
                  <!--  <span class="dataline_desc_word long_text">{{templeDetail.history_desc}} {{templeDetail.rebuild_desc}}</span>-->
                  <!--</el-col>-->
                  <!--<el-col :span="24">-->
                  <!--  <span class="dataline_desc_title">供奉神主</span>-->
                  <!--  <span class="dataline_desc_word long_text" v-html="templeDetail.gods"></span>-->
                  <!--</el-col>-->
                  <!--<el-col :span="24">-->
                  <!--  <span class="dataline_desc_title">参考资料</span>-->
                  <!--  <span class="dataline_desc_word long_text">{{templeDetail.reference_desc}}</span>-->
                  <!--</el-col>-->
                  <!-- <el-col :span="24">
                    <span class="dataline_desc_title">重建情況</span>
                    <span class="dataline_desc_word long_text">{{templeDetail.rebuild_desc}}</span>
                  </el-col> -->
                  <!--<el-col :span="24">-->
                  <!--  <span class="dataline_desc_title">碑刻</span>-->
                  <!--  <span class="dataline_desc_word long_text" style="padding:0.1rem 0">-->
                  <!--    <el-table :data="templeDetail.beike" border size="mini"-->
                  <!--      style="width: 100%;background: transparent;">-->
                  <!--      <el-table-column label="碑题" align="center" show-overflow-tooltip min-width="60%">-->
                  <!--        <template slot-scope="scope">-->
                  <!--          <span :style="scope.row.link_url?'color: #926C40;cursor:pointer':''"-->
                  <!--            @click="scope.row.link_url?handleLinkUrl(scope.row.link_url):false">{{scope.row.title}}</span>-->
                  <!--        </template>-->
                  <!--      </el-table-column>-->
                  <!--      <el-table-column prop="author" label="撰碑者" align="center" show-overflow-tooltip min-width="20%">-->
                  <!--      </el-table-column>-->
                  <!--      <el-table-column prop="publish_date" label="撰立年份" min-width="20%" show-overflow-tooltip-->
                  <!--        align="center">-->
                  <!--      </el-table-column>-->
                  <!--    </el-table>-->
                  <!--  </span>-->
                  <!--</el-col>-->
                  <!--<el-col :span="24">-->
                  <!--  <span class="dataline_desc_title">附加资料</span>-->
                  <!--  <div class="dataline_desc_word long_text">-->
                  <!--    <p class="attach_file" v-for="(item,index) in templeDetail.attachfile" :key="index" @click="handleLookDocument(item.url)">{{item.title}}</p>-->
                  <!--  </div>-->
                  <!--</el-col>-->
                  <el-col :span="24" v-for="(item,index) in templeDetail.ext_info" :key="index">
                    <span v-show="item.inputdata==1 || item.inputdata==2" class="dataline_desc_title">{{item.key}}</span>
                    <span v-show="item.inputdata==1 || item.inputdata==2" class="dataline_desc_word long_text">{{item.val}}</span>
                    
                    <span v-show="item.inputdata==3" class="dataline_desc_title">{{item.key}}</span>
                    <span v-show="item.inputdata==3" class="dataline_desc_word long_text" v-html="item.val"></span>
                    
                    <span v-show="item.inputdata==6" class="dataline_desc_title">{{item.key}}</span>
                    <span v-if="item.inputdata==6 && item.val" class="dataline_desc_word long_text"><a :href="prefixUrl+ item.val.url" target="_blank">{{item.val.title}}</a></span>
                    
                    <span v-show="item.inputdata==7" class="dataline_desc_title">{{item.key}}</span>
                    <span v-if="item.inputdata==7 && item.val" class="dataline_desc_word long_text">
                        <a v-for="(item1,index1) in item.val" :key="index1" :href="prefixUrl+ item1.url" target="_blank">{{index1+1 +'、'}}{{item1.title}}</a><br /></span>
                  </el-col>
                </el-row>
              </div>
              <!-- 神明资料详细 -->
              <div class="see_gods_desc" v-show="isActive==1">
                <p class="gods_title_line">
                  <span>神像所在庙宇</span>
                  <el-select v-model="godsValue" placeholder="" size="mini" @change="handleSelectTemple">
                    <el-option key="all" label="显示所有" value="all">
                    </el-option>
                    <el-option v-for="(item,index) in templeDetail.temples" :key="index" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </aside>
    <!-- 底部 -->
    <footer :style="footerStyle">
      <div class="refresh" @click="handleRefresh">
        <i class="el-icon-refresh"></i>
        <div class="refresh_tips">
            刷新显示所有庙宇
        </div>
      </div>
      <div style="display: flex;">
        <div class="block_title">
          <span class="demonstration">碑刻撰立時間軸</span>
        </div>
        <!-- 滑块 -->
        <div class="block">
          <el-slider v-model="yearsRange" range @change="handleSliderChange" show-stops :min="min" :max="max"
            :marks="marks">
          </el-slider>
        </div>
        <!-- switch ,显示详情按钮 -->
        <div class="footer_info_btn">
          <div class="info_show" id="info_show">
            <el-switch v-model="isShow" active-color="#926C40" inactive-color="#926C40" width="30"
              @change="handleSwitchState" active-text="所有廟宇" inactive-text="今存廟宇">
            </el-switch>
            <!--<div class="info_icon">-->
            <!--  <i class="el-icon-warning-outline"></i>-->
            <!--  <div class="info_message">-->
            <!--    <p>今存庙宇：筛选该时间段内还存在的庙宇</p>-->
            <!--    <p>所有庙宇：筛选该时间段内所有庙宇（包含已废弃的庙宇）</p>-->
            <!--  </div>-->
            <!--</div>-->
          </div>
          <div class="info_check" v-show="isActive==0">
            <span @click="handleCardInfo">碑刻列表</span>
          </div>
        </div>
      </div>
      <!-- 详情部分 -->
      <div class="footer_info">
        <!-- 分割线 -->
        <div class="footer_line">
          <p></p>
          <span>碑刻列表</span>
          <p></p>
        </div>
        <!-- 表格 -->
        <div v-if="stelesList && stelesList.length" class="footer_table">
          <el-table :data="stelesList" border size="mini" style="width: 100%;background: transparent;">
            <el-table-column label="碑题" align="center" show-overflow-tooltip min-width="55%">
              <template slot-scope="scope">
                <span :class="scope.row.link_url?'rowColor':''"
                  @click="scope.row.link_url?handleLinkUrl(scope.row.link_url):false">{{scope.row.title}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="temple" label="所屬廟宇" align="center" show-overflow-tooltip min-width="15%">
              <template slot-scope="scope">
                <span style="cursor: pointer;"
                  @click="handleBelongTemple(scope.row)">{{scope.row.temple_name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="author" label="撰碑者" align="center" show-overflow-tooltip min-width="15%">
            </el-table-column>
            <el-table-column prop="publish_date" label="撰立年份" min-width="15%" show-overflow-tooltip align="center">
            </el-table-column>
          </el-table>
        </div>
        <!-- 搜索 -->
        <div v-else class="footer_search">
          <div class="search_content">
            <el-input size="mini" placeholder="" v-model="footerSearch" disabled>
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-skeleton width="100%">
              <template slot="template">
                <el-skeleton-item v-for="item in 3" variant="p" style="width: 50%;margin:0.2rem 25%" />
              </template>
            </el-skeleton>
            <p style="font-size:0.16rem;color:#999;text-align:center">暫無內容，請選擇其他碑刻</p>
          </div>
        </div>
      </div>
    </footer>
    <!-- 弹出层 -->
    <el-dialog custom-class="tablet_info" :title="templeDetail.name+(isActive==0?'':'神像图片')"
      :visible.sync="dialogVisible" :before-close="handleDiaClose" top="2%" width="60%">
      <!-- 内容部分 -->
      <div class="info_content">
        <ul class="content_header" v-show="activeScaleType&&isActive==0">
          <li v-for="(item,index) in templeDetail.tab_info" :key="index">
            <span :class="curActiveNav==index?'active':''" style="cursor: pointer;"
              @click="handleActiveNav(item,index)">{{item.name}}</span>
          </li>
        </ul>
        <!-- list -->
        <div class="content_list" v-show="activeScaleType=='list'">
          <ul>
            <li v-show="dialogList.length" class="list_title list_desc">
              <span class="desc_left" style="border-right: 0.01rem solid #E9D8BB;">文件名稱</span>
              <span class="desc_right">大小</span>
            </li>
            <li v-show="dialogList.length==0" style="text-align:center">暂无数据</li>
            <li v-show="dialogList.length" class="list_desc" v-for="(item,index) in dialogList"
              @click="handleImgInfo(item,index)">
              <span class="desc_left">
                <img src="./imgs/img.png" alt="">
                <span style="color: #D4C003;">{{item.is_full_view==1?'[全景]':''}}</span>
                <span>{{item.name}}</span>
              </span>
              <span class="desc_right">{{item.file_size}}KB</span>
            </li>
          </ul>
        </div>
        <!-- card -->
        <div class="content_card" v-show="activeScaleType=='card'">
          <ul v-show="dialogList">
            <li class="card_img" v-for="(item,index) in dialogList" :key="index" @click="handleImgInfo(item,index)">
              <div class="wrap_img">
                <!-- <img v-if="item.img" :src="prefixUrl+item.img" alt=""> -->
                <el-image v-if="item.picimage" :src="prefixUrl+item.picimage" :lazy="index>8" placeholder="图片加载中..."
                  error="加载失败!"></el-image>
              </div>
              <p>
                <span v-show="item.is_full_view==1" class="all_view">全景</span>
                <span>{{item.name}}</span>
              </p>
            </li>
          </ul>
        </div>
        <!-- content_img -->
        <div class="content_img" v-show="!activeScaleType">
          <el-carousel height="100%" :autoplay="false" arrow="hover" indicator-position="none" ref="carousel">
            <el-carousel-item v-for="(item,index) in dialogList" :key="index">
              <div class="carousel_img">
                <!-- <img v-if="diaImgInfo.img" :src="prefixUrl+diaImgInfo.img" alt="">
                <div class="img_desc">
                  <div>
                    <h4>{{diaImgInfo.title}}</h4>
                    <p>{{diaImgInfo.addres}}</p>
                    <h6 style="padding-top:0.1rem ;">{{diaImgInfo.event_name}}</h6>
                    <p style="border:none">{{diaImgInfo.event_desc}}</p>
                  </div> -->
                  <img v-if="diaImgInfo.picimage" :src="prefixUrl+item.picimage" alt="">
                  <div class="img_desc">
                    <div>
                      <h4>{{item.event_title}}</h4>
                      <!--<p></p>-->
                      <!--<h6 style="padding-top:0.1rem ;">{{item.event_name}}</h6>-->
                      <p>{{item.event_desc}}</p>
                    </div>
                  <span class="scale_full_img">
                    <i v-for="(item,index) in item.attachfile" :key="index" @click="handleLookDocument(item.url)" class="el-icon-document" :title="item.title"></i>
                    <i v-if="item.is_full_view == 0" class="el-icon-rank" @click="handleFullPageImg"  title="全屏"></i> 
                    <img v-else @click="handleFullPageImg" src="./imgs/full_view_icon.png" alt="全屏" title="全屏">
                  </span>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>

        </div>
      </div>
      <!-- 弹出底部 -->
      <div class="info_footer" v-show="activeScaleType=='list' || activeScaleType=='card'">
        <span>共{{stelesList&&dialogList.length}}個項目</span>
        <p class="scale_img">
          <span @click="handleScaleImg('card')" :class="activeScaleType=='card'?'active':''">
            <img :src="activeScaleType=='card'?'./imgs/scale_card.png':'./imgs/scale_card_active.png'" alt="">
          </span>
          <span @click="handleScaleImg('list')" :class="activeScaleType=='list'?'active':''">
            <img :src="activeScaleType=='list'?'./imgs/scale_list.png':'./imgs/scale_list_active.png'" alt="">
          </span>
        </p>
      </div>
    </el-dialog>
    <el-dialog custom-class="full_screen" :visible.sync="dialogFullVisible" fullscreen>
      <div class="full_screenimg">
        <!-- <img src="./imgs/demo/img_info.png" alt=""> -->
      </div>
    </el-dialog>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        // prefixUrl: 'http://service.tinkerbots.vip/', // 图片地址前缀   
        prefixUrl: 'http://101.33.125.245/', // 图片地址前缀 
        map: null, // 地图实例
        curLocation: 'guangzhou', // 当前地理位置（默认广州）
        isActive: 0, // 神像
        activeCard: { // 选中的list
          cardInfo: '',
          cardIndex: null
        },
        godsList: [
          { label: '玄都觀（柴灣）', value: '1' },
          { label: '玄都觀（柴灣）', value: '2' },
          { label: '玄都觀（柴灣）', value: '3' },
          { label: '玄都觀（柴灣）', value: '4' },
        ], //
        asideList1: [], // 侧边列表
        asideList2: [], // 侧边列表
        total: 0, // 搜索的总数
        total1: 0, // 查询庙宇的总数
        total2: 0, // 查询神明的总数
        templeDetail: {}, // 庙宇详情
        footerSearch: '', // 底部搜索
        asideSearch: '', // 侧边搜索
        searchResult: '', // 搜索结果
        godsValue: '', // 侧边神明搜索
        searchResultFlag: false, // 搜索结果状态
        listInfoClick: false, // 点击列表查看详情
        godsSelectClick: false, // 神像所在庙宇
        curClickGodId: '', // 当前点击的神像id
        min: 1700, // 最小年份
        max: 1900, // 最大年份
        rangeFlag: true, // 滑块范围获取标志
        yearsRange: [], // 滑块
        marks: {},
        isShow: false, // 显示、隐藏
        footerStyle: {}, // 碑刻详情样式
        isExpandInfo: false, // 碑刻详情显示状态
        stelesList: [], // 底部碑刻列表
        tableData: [
          {
            title: '〈玄都岩樂助建欵善長芳名玉照留念〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈玄都仙觀樂成碑〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈玄都仙觀太上老君寶殿緣啟〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈玄都仙觀建立緣起碑記紫極玄都門樓西廳...〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈重建道祖殿前拜亭〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈建像簡誌〉',
            author: '作者名',
            year: '1972'
          },
          {
            title: '〈玄都岩樂助建欵善長芳名玉照留念〉',
            author: '作者名',
            year: '1972'
          },
        ],
        dialogVisible: false, // 弹出层显示状态
        diaImgInfo: {}, // 图片详情
        dialogHeaderTitleList: [
          { name: '碑刻', code: 'beike' },
          { name: '神明', code: 'shenming' },
          { name: '廟貌', code: 'miaomao' },
          // {name:'節誕和儀式',code:'shendan'},
          // {name:'經書',code:'jingshu'},
        ],
        curActiveNav: 0, // 当前nav
        dialogList: [], // 弹出层数据
        activeScaleType: 'card', // 缩略图模式切换
        saveScaleType: 'card', // 存储上次的缩略图模式
        dialogFullVisible: false, // 全屏显示的图片状态
        mapMarkerList: [], // 标记点经纬度
        tempMarker:[], // 存储所有庙宇
      },
      methods: {
        // 切换地理位置
        handleChangeLocation() {
          this.curLocation = this.curLocation == 'guangzhou' ? 'hongkong' : 'guangzhou';
          this.godsValue = ''; // 侧边神明搜索
          this.asideSearch = ''; // 侧边搜索
          this.getTemples(); // 庙宇列表
        //   if (this.curLocation == 'guangzhou') {
        //     document.title = '广州道教廟宇數位博物館';
        //     this.dialogHeaderTitleList = [
        //       { name: '碑刻', code: 'beike' },
        //       { name: '神明', code: 'shenming' },
        //       { name: '廟貌', code: 'miaomao' },
        //     ];
        //   } else {
        //     document.title = '香港道教廟宇數位博物館';
        //     this.dialogHeaderTitleList = [
        //       { name: '碑刻', code: 'beike' },
        //       { name: '神明', code: 'shenming' },
        //       { name: '廟貌', code: 'miaomao' },
        //       { name: '節誕和儀式', code: 'shendan' },
        //       { name: '經書', code: 'jingshu' },
        //     ];
        //   }
          this.foundMap(); // 创建地图
          this.foundMarker(); // 创建地图标记
          // if(this.isActive == 0){
          //   this.foundMarker(); // 创建地图标记
          // }
          this.handleSwitchTabs(0);
          this.searchResultFlag = false; // 搜索结果状态
          this.listInfoClick = false; // 点击列表查看详情
          this.godsSelectClick = false; // 神像所在庙宇
          this.curClickGodId = ''; // 当前点击的神像id
        },
        // 切换tabs
        handleSwitchTabs(actIndex) {
          this.isActive = actIndex;
          if (actIndex == 1) {
            this.isExpandInfo = false;
            this.footerStyle = {
              bottom: '-6rem'
            };
            this.getGods();
            this.foundMap(); // 创建地图
          } else {
            this.getTemples();
            // this.mapMarkerList = this.asideList1;
            // this.foundMap(); // 创建地图
            // this.foundMarker(); // 创建地图标记
          }
        },
        // 刷新
        handleRefresh(){
            this.getTemples();
            this.getSteles("",false,true);
        },
        // 搜索
        handleSearch() {
          this.searchResult = this.asideSearch;
          this.isActive == 0 ? this.getTemples() : this.getGods();
          // this.highlightKey(this.asideSearch); // 高亮关键词
          if (this.asideSearch) {
            this.listInfoClick = false;
            this.searchResultFlag = true;
          }
        },
        // 列表点击
        handleActiveCard(item) {
          this.listInfoClick = true;
          this.isActive == 0 ? this.getTempleDetail(item.id) : this.getGodDetail(item.id);
          if (this.isActive == 1) {
            this.curClickGodId = item.id;
            this.godsValue = 'all';
          }
          this.getSteles(item.id);
        },
        // 底部表格所属庙宇点击
        handleBelongTemple(row){
          console.log(row)
          this.listInfoClick = true;
          this.getTempleDetail(row.temple_id);
        },
        // 返回上一级
        handleFrontGrade() {
          this.godsValue = ''; // 清空神像所在庙宇
          if (this.listInfoClick && !this.searchResultFlag) {
            this.listInfoClick = false;
            this.searchResultFlag = false;
          } else if (this.listInfoClick && this.searchResultFlag) {
            this.listInfoClick = false;
            this.searchResultFlag = true;
          }
          if (this.godsSelectClick) { // 点击神像所在庙宇后，返回神像详情页
            this.isActive = 1;
            this.handleActiveCard({ id: this.curClickGodId });
            this.godsSelectClick = false;
          }
          if (this.isActive == 1) {
              this.getGods();
            // this.foundMap();
          }else{
              this.getTemples();
          }
        },
        // 返回
        handleBackList() {
          this.listInfoClick = false;
          this.searchResultFlag = false;
          this.asideSearch = '';
          this.isActive == 0 ? this.getTemples() : this.getGods();
        },
        // 底部年份滑块
        handleSliderChange(value) {
          // console.log(value);
          this.yearsRange = value;
          this.getSteles('',true); // 碑刻列表
        },
        // 查看详情按钮
        handleLookInfo() {
          this.handleScaleImg('card');
          if (this.isActive == 0) {
            // if (this.curLocation == 'guangzhou') {
            //   this.dialogHeaderTitleList = [
            //     { name: '碑刻', code: 'beike' },
            //     { name: '神明', code: 'shenming' },
            //     { name: '廟貌', code: 'miaomao' },
            //   ];
            // } else {
            //   this.dialogHeaderTitleList = [
            //     { name: '碑刻', code: 'beike' },
            //     { name: '神明', code: 'shenming' },
            //     { name: '廟貌', code: 'miaomao' },
            //     { name: '節誕和儀式', code: 'shendan' },
            //     { name: '經書', code: 'jingshu' },
            //   ];
            // }
            // if (!this.templeDetail.beike) { // 碑刻
            //   this.dialogHeaderTitleList = this.dialogHeaderTitleList.filter(item=>item.code!='beike');
            // } 
            // if (!this.templeDetail.shenming) { // 神明
            //   this.dialogHeaderTitleList = this.dialogHeaderTitleList.filter(item=>item.code!='shenming');
            // } 
            // if (!this.templeDetail.miaomao) { // 廟貌
            //   this.dialogHeaderTitleList = this.dialogHeaderTitleList.filter(item=>item.code!='miaomao');
            // } 
            // if (!this.templeDetail.shendan && this.curLocation == 'hongkong') { // 節誕和儀式
            //   this.dialogHeaderTitleList = this.dialogHeaderTitleList.filter(item=>item.code!='shendan');
            // } 
            // if (!this.templeDetail.jingshu && this.curLocation == 'hongkong') { // 經書
            //   this.dialogHeaderTitleList = this.dialogHeaderTitleList.filter(item=>item.code!='jingshu');
            // }
            // this.dialogList = this.dialogHeaderTitleList.length?this.templeDetail.beike:[];
            this.dialogList = this.templeDetail.tab_info.length?this.templeDetail.tab_info[0].pics:[];
          } else {
            this.dialogList = this.templeDetail.pics.length?this.templeDetail.pics:[];
          }
          if(this.dialogList.length > 0){
            this.dialogVisible = true;
          }else{
            this.$message({
              type:'warning',
              message:`该${this.isActive==0?'庙宇':'神明'}无数据信息！`
            })
          }
        },
        // switch 显示、隐藏
        handleSwitchState(val) {
          this.isShow = val;
          // 创建一个 Marker 实例：
          let marker = new AMap.Marker({
            position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '北京'
          });
          // 将创建的点标记添加到已有的地图实例：
          // this.map.remove(marker);
          // val?map.add(marker):map.remove(marker);
        },
        // 碑刻详情
        handleCardInfo() {
          // this.dialogVisible = true;
          this.isExpandInfo = !this.isExpandInfo;
          this.footerStyle = {
            bottom: this.isExpandInfo ? 0 : '-6rem'
          };
        },
        // 碑刻外链跳转
        handleLinkUrl(url) {
          window.open(url);
        },
        // 查看文档
        handleLookDocument(url){
          // window.open('http://101.33.125.245/uploads/20220106/8ecf94ad6f5ed8c8fe50f48de206404c.pdf');
          window.open(this.prefixUrl + url);
        },
        // 弹出层nav切换
        handleActiveNav(item, index) {
          this.curActiveNav = index;
          this.dialogList = this.isActive == 0?this.templeDetail.tab_info[index].pics:this.templeDetail.pics;
        },
        // 缩略图切换
        handleScaleImg(type) {
          this.activeScaleType = type;
        },
        // 点击查看图片详情
        handleImgInfo(item, index) {
        //   console.log(item,index);
          this.$refs.carousel.setActiveItem(index);
          this.diaImgInfo = item;
          this.saveScaleType = JSON.parse(JSON.stringify(this.activeScaleType));
          this.activeScaleType = ''; // 清空缩略图模式
        },
        // 全屏显示图片
        handleFullPageImg() {
          // this.dialogFullVisible = true;
          // console.log(this.prefixUrl + this.diaImgInfo.img);
          sessionStorage.setItem('fullImgUrl', this.prefixUrl + this.diaImgInfo.picimage);
          // console.log(this.diaImgInfo.is_full_view == 1);
          this.diaImgInfo.is_full_view == 1?window.open('./watch3D.html'):window.open('./imgScale.html');
        },
        // 弹出层关闭回调函数
        handleDiaClose(done) {
          if (!this.activeScaleType) {
            this.activeScaleType = JSON.parse(JSON.stringify(this.saveScaleType));
          } else {
            done(); // 执行关闭
            this.activeScaleType = 'list';
            this.curActiveNav = 0; // 当前nav恢复0
            this.dialogList = []; // 弹出层数据清空
          }
        },
        // 创建地图并标记
        foundMap() {
          // 创建地图
            let center = [113.332205, 23.156263];
            if(this.mapMarkerList.length && this.mapMarkerList[0].longitude && this.mapMarkerList[0].latitude){
              center = [
              this.mapMarkerList[0].longitude,
              this.mapMarkerList[0].latitude,
              ];
            }
          this.map = new AMap.Map("main", {
            // center: this.curLocation == 'guangzhou' ? [113.332205, 23.156263] : [114.173355, 22.320048],
            center:center,
            zoom: 12,
          });
          this.map.on('click',()=>{
            this.isExpandInfo = false;
            this.footerStyle = {
              bottom: this.isExpandInfo ? 0 : '-6rem'
            };
          })
        },
        // 创建标记点
        foundMarker() {
          // 创建 AMap.Icon 实例：
          let icon_active = './imgs/mark_active.png';
          let icon_sign = './imgs/mark_sign.png';
          let icon_disable = './imgs/mark_disable.png';
          // 创建标记点
          this.mapMarkerList.forEach((item) => {
            // console.log(item);
            if(!item.longitude || !item.latitude){
              return
            }
            let img_icon = icon_sign;
            if (item.state == 'sign') {
              img_icon = icon_sign;
            } else {
              img_icon = icon_disable;
            }
            let icon = new AMap.Icon({
              size: new AMap.Size(20, 24),    // 图标尺寸
              image: img_icon,  // Icon的图像
              imageSize: new AMap.Size(20, 24)   // 根据所设置的大小拉伸或压缩图片
            });
            let iconActive = new AMap.Icon({
              size: new AMap.Size(20, 24),    // 图标尺寸
              image: icon_active,  // Icon的图像
              imageSize: new AMap.Size(20, 24)   // 根据所设置的大小拉伸或压缩图片
            });
            let content1 =
              `<div class="marker_shenming">
              <p class="marker_title">${this.templeDetail.name?this.templeDetail.name:''}</p>
              <p>所属庙宇：${item.name} </p>
              <p>新址：${item.new_addr?item.new_addr:''}</p>
            </div>`;
            let content2 =
              `<div class="marker_desc">
              <p class="marker_title">${item.name}</p>
              <p>新址：${item.new_addr}</p>
            </div>`;
            let contentDisable =
              `<div class="marker_none">
            </div>`;
            let marker = new AMap.Marker({
              // content:content,
              position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: icon,
            });
            let markerContent1 = new AMap.Marker({
              content: content1,
              position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: icon,
            });
            let markerContent2 = new AMap.Marker({
              content: content2,
              position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: icon,
            });
            let markerContentDisable = new AMap.Marker({
              content: contentDisable,
              position: new AMap.LngLat(item.longitude, item.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              icon: icon,
            });
            // 标记点鼠标移入事件
            marker.on('mousemove', (ev) => {
              if (item.state == 'sign') {
                marker.setIcon(iconActive);
                setTimeout(() => {
                  this.map.add(this.isActive == 1 ? markerContent1 : markerContent2);
                }, 500)
              } else {
                setTimeout(() => {
                  // this.map.add(markerContentDisable);
                  this.map.add(this.isActive == 1 ? markerContent1 : markerContent2);
                }, 500)
              }
            })
            // 标记点鼠标移出事件
            marker.on('mouseout', (ev) => {
              if (item.state == 'sign') {
                marker.setIcon(icon);
                setTimeout(() => {
                  this.map.remove(this.isActive == 1 ? markerContent1 : markerContent2);
                }, 500)
              } else {
                setTimeout(() => {
                  // this.map.remove(markerContentDisable);
                  this.map.remove(this.isActive == 1 ? markerContent1 : markerContent2);
                }, 500)
              }
            })
            // 标记点鼠标点击事件
            marker.on('click', (ev) => {
              // if(item.state == 'sign'){
                this.listInfoClick = true;
                this.getTempleDetail(item.id);
              // }
            })
            // 显示出、隐藏按钮监听
            AMap.event.addDomListener(document.getElementById('info_show'), 'click', () => {
              if (this.isShow && this.isActive==0) { // 显示
                if (item.state == 'disable') this.map.add(marker);
              } else {
                if (item.state == 'disable') this.map.remove(marker);
              }
            })
            // 将创建的点标记添加到已有的地图实例：
            if (item.state == 'sign') this.map.add(marker);
          });
        },
        // 庙宇列表
        getTemples(ids) {
          ids = ids?ids:'';
          let area = this.curLocation == 'guangzhou' ? 1 : 2;
          axios.get('/getTemples?keyword=' + this.asideSearch + '&area=' + area+'&ids='+ids)
            .then((res) => {
            //   console.log(res.data.data.list);
              let asideList = res.data.data.list;
              this.asideList1 = asideList;
              this.asideList1.forEach((ele) => {
                ele.state = ele.is_exist==1?'sign':'disable';
                // ele.state = 'sign';
              })
              this.total = res.data.data.total;
              this.total1 = res.data.data.total;
              // console.log(this.asideList1);
              this.mapMarkerList = this.asideList1;
              this.foundMap(); // 创建地图
              this.foundMarker(); // 创建地图标记
              if(this.asideSearch){
                  this.getSteles(res.data.data.list[0].id,false,true); // 碑刻列表
              }else{
                  this.getSteles(); // 碑刻列表
              }
              
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 神明列表
        getGods() {
          let area = this.curLocation == 'guangzhou' ? 1 : 2;
          axios.get('/getGods?keyword=' + this.asideSearch + '&area=' + area)
            .then((res) => {
              // console.log(res.data.data.list);
              this.asideList2 = res.data.data.list;
              this.total = res.data.data.total;
              this.total2 = res.data.data.total;
              let temples = [];
              if(this.asideList2.length){
                this.asideList2.forEach(ele=>{
                    if(ele.temples)temples.push(...ele.temples);
                })
              }
            //   console.log(temples);
              if(this.isActive == 1){
                  this.mapMarkerList = temples;
                  this.mapMarkerList.forEach(ele=>{
                      ele.state = "sign";
                  })
                  this.foundMap(); // 创建地图
                  this.foundMarker(); // 创建地图标记
              }
              
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 碑刻列表
        getSteles(id,flag,dateFlag) {
          id = id?id:'';
          let start = this.yearsRange[0];
          let end = this.yearsRange[1];
          if(dateFlag){
              start = "";
              end = "";
          }
          let area = this.curLocation=='guangzhou' ?1:2;
          axios.get('/getSteles/start_year/' + start + '/end_year/' + end+'/area/'+ area + '/temple_id/' + id)
            .then((res) => {
              // console.log(res.data.data);
              if (res.data.data) {
                this.stelesList = res.data.data.list || [];
                // console.log(this.stelesList, "aaa------")
                let start = JSON.parse(JSON.stringify(res.data.data.start_year));
                let end = JSON.parse(JSON.stringify(res.data.data.end_year));
                
                if (this.rangeFlag) {
                  this.yearsRange = [Number(start), Number(end)];
                  this.min = Number(start);
                  this.max = Number(end);
                  this.rangeFlag = false;
                  this.marks = {};
                  this.marks[this.min] = {
                    style: {
                      fontSize: '0.12rem'
                    },
                    label: this.min + '年'
                  };
                  this.marks[this.max] = {
                    style: {
                      fontSize: '0.12rem'
                    },
                    label: this.max + '年'
                  };
                }
                if(flag){
                  let stelesIds = [];
                  if(this.stelesList.length){
                    this.stelesList.forEach((ele)=>{
                        // console.log(ele)
                      stelesIds.push(ele.temple_id);
                    })
                  }
                  if(stelesIds.length)this.getTemples(stelesIds.join(','));
                }
              }
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 庙宇详情
        getTempleDetail(id, callback) {
            this.templeDetail = {};
          axios.get('/getTempleDetail?id=' + id)
            .then((res) => {
            //   console.log(res.data.data);
              let temple = {
                  ...res.data.data,
                  state:'sign'
              };
              this.mapMarkerList = this.mapMarkerList.filter(item=>item.id!=id);
              this.mapMarkerList.unshift(temple);
              this.templeDetail = res.data.data;
                this.foundMap(); // 创建地图
                this.foundMarker(); // 创建地图标记
              // console.log("开始")
              callback && callback()
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 神明详情
        getGodDetail(id,temId) {
            // console.log(this.godsValue)
          axios.get('/getGodDetail?id=' + id+'&temple_id='+temId)
            .then((res) => {
            //   console.log(res.data.data);
              this.templeDetail = res.data.data;
              this.templeDetail.image = res.data.data.img;
              if (res.data.data.temples && res.data.data.temples.length) {
                this.mapMarkerList = res.data.data.temples;
                this.mapMarkerList.forEach((ele) => {
                  ele.state = 'sign';
                })
                this.tempMarker = JSON.parse(JSON.stringify(this.mapMarkerList));
                this.foundMap(); // 创建地图
                this.foundMarker(); // 创建地图标记
              }
            //   callback && callback()
            })
            .catch((err) => {
              console.log(err);
            })
        },
        // 选择神像所在庙宇
        handleSelectTemple(val) {
            // this.getGodDetail(this.curClickGodId,val);
            this.mapMarkerList = JSON.parse(JSON.stringify(this.tempMarker));
            if(val != 'all'){
                this.mapMarkerList = this.mapMarkerList.filter(item=>item.id == val);
            }else{
                this.getGodDetail('','');
            }
            this.foundMap(); // 创建地图
            this.foundMarker(); // 创建地图标记
        //   this.godsSelectClick = true; // 跳转
        //   this.isActive = 0;
        //   this.handleActiveCard({ id: val });
          // this.getTempleDetail(val);
        },
        // 高亮关键词搜索
        highlightKey(keyword) {
          if (keyword != '') {
            $(".left_title").each(() => {
              let str = $(this).html();
              let substr = "/(" + keyword + ")/g";
              let lightHtml = `<span style='color:${this.searchResultFlag ? '#D4C003' : ''}'>${keyword}</span>`;
              let replaceStr = str.replace(eval(substr), lightHtml);
              $(this).html(replaceStr);
            });
          }
        },
        // 跳转到DDM2
        handleGoDDM2() {
          window.open('https://www.baidu.com');
        },
        // 获取请求参数方法
        getQueryVariable(variable) {
          var query = window.location.search.substring(1);
          var vars = query.split("&") || [];
          for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
          }
          return null;
        }
      },
      created() {
        // 1.1进来根据请求参数判断是否需要显示弹窗
        // 获取请求参数方法
        // getQueryVariable(variable) {
        //   var query = window.location.search.substring(1);
        //   var vars = query.split("&");
        //   for (var i = 0; i < vars.length; i++) {
        //     var pair = vars[i].split("=");
        //     if (pair[0] == variable) { return pair[1]; }
        //   }
        //   return null;
        // }
        // var id = this.getQueryVariable('id')
        // var type = this.getQueryVariable('type')
        // 1.2根据请求参数请求和判断需要显示的是庙宇还是神明
        // 修改这两个方法（getTempleDetail，getGodDetail）添加一个callback参数(请求成功回调函数),或者改成async await
        // 根据类型判断调用 this.getTempleDetail(id) // 获取庙宇详情接口    this.getGodDetail(id) //获取神明详情接口
        // 1.3请求完成调用callback显示弹窗
        // let callback = () => {
        //     this.handleLookInfo();
        //     this.dialogVisible = true;
        //     this.listInfoClick = true;
        //   }
        // 或者
        // this.handleLookInfo();
        // this.dialogVisible = true;
        // this.listInfoClick = true;


        axios.defaults.baseURL = 'http://101.33.125.245/api/index';
        // 底部详情显示状态
        this.footerStyle = {
          bottom: this.isExpandInfo ? 0 : '-6rem'
        };

      },
      mounted() {
        this.getTemples(); // 庙宇列表
        this.getGods(); // 神明列表
        // this.foundMap(); // 创建地图

        var id = this.getQueryVariable('id')
        var type = this.getQueryVariable('type');
        if (id) {
          var callback = () => {
            this.handleLookInfo();
            this.dialogVisible = true;
            this.listInfoClick = true;
          }
          if (type == 'deities') {
            this.isActive = 1;
            this.getGodDetail(id, callback)
          } else {
            this.getTempleDetail(id, callback)
          }
        }
      },
    });
  </script>
  <!-- 引入js -->
  <script src="./js/index.js"></script>
</body>

</html>